<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>说说</title>
</head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">

<body>



    <div id="overall">

        <font style="color: aqua;">
            <h2 style="text-align: center;">说说界面</h2>

            用户名：<span style="font-size: 20px;" id="userName"><b> {{name}}</b> </span>

            <a href="./cancelBtn" id="cancelBtn"><input type="button" value="注销"></input></a>

            <input type="button" id="publishedAboutBtn" value="发表说说">
        </font>

        <div style="margin-top: 20px;">
            <!-- controls 显示控件  循环   静音   马上播放 -->
            <video width="600px" height="337px" loop muted autoplay>
                <source src="/img/index.mp4" type="video/mp4">
            </video>
        </div>

        <div id="sayAll">
            {% for msg in msgArr %}
            <!-- 去除了 bg-info -->
            <div class=" card text-white  mb-3 taklsAll({{msg.id}})"
                style="max-width: 37rem; margin:auto; background-color: transparent;">

                <div class="card-header ">
                    <!-- 说说 -->
                    <div id="talk">

                        <!-- 发表说说 -->
                        <div id="publishedAbout" class="card-header">

                            <form action="doComment" method="post" id="comments">

                                <div id="doComment({{msg.id}})">
                                    <input type="hidden" name="msgId" id="msgId" value={{msg.id}}>
                                </div>

                                <span style="font-size: 20px;">{{msg.uName}}</span>：{{msg.content}}

                                <!-- //点赞功能  不完善稍后在搞 -->
                                <button type="button" onclick="tags(`{{msg.id}}`)"><img src="img/zan.png" alt="赞一个"
                                        id="zanImg"></button>

                                <!-- 吐槽一下按钮 -->
                                <input type="submit" value="吐槽一下" onclick="comment(`{{msg.id}}`)" class="comment">
                            </form>


                        </div>



                        <!-- //点赞区 -->
                        <div id="zanArea({{msg.id}})" readonly="readonly">
                            {% for likes in likesArr %}
                            {% if likes.applaud==true %}
                            {% if likes.msgId==msg.id %}

                            <span style="color:chartreuse;">{{likes.UserName}}</span>

                            {% endif %}
                            {% endif %}
                            {% endfor %}

                        </div>



                    </div>
                </div>

                <!-- 评论 -->
                <div class="card-body">
                    <ul class="list-group list-group-flush" id="remark({{msg.id}})">

                        {% for com in comsArr %}

                        {% if com.msgId==msg.id %}

                        <li>
                            <blockquote class="blockquote mb-0">
                                <footer class="blockquote-footer" onclick="reply(`{{loop.index0}}`,`{{msg.id}}`)">
                                    {% if com.toUserId==null %}
                                    <span class="replys({{loop.index0}})">{{com.fromUserName}}</span>：{{com.content}}
                                    {% else %}
                                       {% if com.toUserId !== com.fromUserId %}
                                    <span
                                        class="replys({{loop.index0}})">{{com.fromUserName}}</span>回复{{com.toUserName}}：{{com.content}}
                                       {% endif %}
                                    {% endif %}
                                </footer>
                            </blockquote>
                        </li>

                        {% endif %}
                        {% endfor %}

                    </ul>
                </div>

            </div>
            {% endfor %}
        </div>

    </div>

    <!-- //发表说说框 -->
    <div id="talkPlace">
        <h2>发表说说</h2>

        <form action="doPublish" method="POST">
            <!-- 多行文本框 -->
            <textarea cols="30" rows="10" id="manyText" name="manyText"></textarea>
            <br>
            <input type="submit" value="发表" id="publish">
            <input type="button" value="取消" id="quit"></input>

        </form>
    </div>



    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script src="js/index.js"></script>

    <script>
        // 保存当前说说的id
        let currentMsgId;
        //保存当前id值
        let indexs

        // 吐槽一下     
        function comment(num) {

            var txt;

            var person = prompt("请输入您要吐槽的内容：", "哈哈哈");
            if (person == null || person == "") {
                txt = "";
            } else {
                txt = `<input type="hidden" name="comsValue" id="comsValue" value= ${person}>`;
            }
            document.getElementById(`doComment(${num})`).innerHTML += txt

        }

        // 回复一下
        function reply(num, msgid) {

            let txt;

            currentMsgId = msgid;
            indexs = Number(num) + 1;

            //获取当前标签里的值(用户)
            let formUser = document.getElementsByClassName(`replys(${num})`)[0].innerText || ""

            console.log("num：" + num);
            console.log("msgid：" + msgid);
            console.log("要回复的用户：" + formUser);

    
                let commentMsg = prompt(`你要对${formUser}说什么`);
         

            axios({
                method: 'post',
                url: '/reply',
                data: {
                    //回复内容
                    commentMsg: commentMsg,
                    // 被回复用户
                    formUser: formUser,
                    //当前说说id
                    msgId: currentMsgId
                },
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                if (res.code === 200) {
                    // 获得评论信息，渲染指定的dom片段
                    let data = res.data;

                    //   ,userId:userId,formUser:formUser,msgId: msgId,content: commentMsg 
                    let html = `
                    <li>
                            <blockquote class="blockquote mb-0">
                                <footer class="blockquote-footer" onclick="reply(${indexs},${res.msgId})">
                
                                    <span class="replys({{loop.index0}})">${res.userName}</span>回复${res.formUser}：${res.content}

                                </footer>
                            </blockquote>
                        </li>
                    `;
                    // 将渲染好的dom片段，插入到指定id节点的最后面
                    document.getElementById(`remark(${res.msgId})`).innerHTML += html

                    console.log("200通过");
                } else {
                    console.log('2000判断不通过---' + res.msg);

                }
            }).catch((err) => {
                console.log(err);
            });
        }


        //点赞
        function tags(msgid) {

            currentMsgId = msgid;

            axios({
                method: 'post',
                url: '/tags',
                data: {
                    // userId | msgId | applaud
                    //当前说说id
                    msgId: currentMsgId
                },
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                if (res.code === 200) {
                    // 获得评论信息，渲染指定的dom片段
                    let data = res.data;

                    console.log(res.applaud);

                    if (res.applaud == undefined) {
                        let html = `<span style="color:chartreuse;">${res.userName}</span>`;
                        // 将渲染好的dom片段，插入到指定id节点的最后面
                        document.getElementById(`zanArea(${res.msgId})`).innerHTML += html;

                        console.log("插入成功+200通过");
                    } else {
                        if (res.applaud == false) {
                            let html = `<span style="color:chartreuse;">${res.userName}</span>`;
                            // 将渲染好的dom片段，插入到指定id节点的最后面
                            document.getElementById(`zanArea(${res.msgId})`).innerHTML += html;

                            console.log("插入成功+200通过");

                        } else {
                            // 获取点赞框
                            var test = document.getElementById(`zanArea(${res.msgId})`);

                            //遍历点赞框里的子节点
                            for (var i = 0; i < test.children.length; i++) {

                                if (test.children[i].innerHTML == `${res.userName}`) {

                                    //如果有当前用户则删除                                                            
                                    test.removeChild(test.children[i]);
                                    console.log("修改成功+200通过");
                                }
                            }

                        }
                    }

                } else {
                    console.log('2000判断不通过---' + res.msg);

                }
            }).catch((err) => {
                console.log(err);
            });
        }
    </script>
</body>


</html>



</html>